<template>
	<custom-waterfalls-flow :value="shopList" @wapperClick="gotoShopInfo">
		<!-- #ifdef MP-WEIXIN -->
		<view class="item" v-for="(item, index) in shopList" :key="index" slot="slot{{index}}">
			<view class="title">{{ item.name || '暂无信息' }}</view>
			<view class="con">
				<uni-tag :text="item.artid ? '云仓发货' : '商家自营'" type="error" size="mini" style="margin-right: 10rpx" :inverted="true" />
				<uni-tag :text="item.recipeType ? '处方药' : '非处方药'" type="error" size="mini" />
			</view>
			<view class="shop-price">
				<view class="">
					<text class="shop-price-mini">￥</text>
					{{ getShopPrice(item) }}
				</view>

				<view class="shop-cart" @click.stop="getcloudAddCart(item.id, item.artid)">
					<u-icon name="shopping-cart" size="20" color="#fff"></u-icon>
				</view>
			</view>
		</view>
		<!-- #endif -->

		<!-- #ifndef MP-WEIXIN -->
		<template v-slot:default="item">
			<view class="item">
				<view class="title">{{ item.name || '暂无信息' }}</view>
				<view class="con">
					<uni-tag :text="item.artid ? '云仓发货' : '商家自营'" type="error" size="mini" style="margin-right: 10rpx" :inverted="true" />
					<uni-tag :text="item.recipeType ? '处方药' : '非处方药'" type="error" size="mini" />
				</view>
				<view class="shop-price">
					<view class="">
						<text class="shop-price-mini">￥</text>
						{{ getShopPrice(item) }}
					</view>

					<view class="shop-cart" @click.stop="getcloudAddCart(item.id, item.artid)">
						<u-icon name="shopping-cart" size="20" color="#fff"></u-icon>
					</view>
				</view>
			</view>
		</template>
		<!-- #endif -->
	</custom-waterfalls-flow>
</template>

<script>
import { cloudAddCart } from '../../api/home/index.js';
export default {
	name: 'hwxcShopItem',
	data() {
		return {
			ratio: 0
		};
	},

	props: {
		shopList: {
			type: Array,
			default: () => []
		},
		shopType: {
			type: String,
			default: ''
		}
	},

	mounted() {
		console.log(this.$store.state.commInitInfo);
		this.ratio = this.$store.state.commInitInfo.yyd_ratio;
		// this.isVip = this.$store.state.commInitInfo
	},

	methods: {
		gotoShopInfo(val) {
			uni.navigateTo({
				url: `/pages/shoppingInfo/shoppingInfo?id=${val.id}&brandType=${this.shopType}`
			});
		},

		// 加入购物车
		async getcloudAddCart(id, artid) {
			try {
				const queryData = {
					id,
					num: 1,
					type: artid ? 0 : 1
				};
				const resData = await cloudAddCart(queryData);
				uni.showToast({
					title: '添加成功',
					icon: 'none'
				});
				setTimeout(() => {
					this.$emit('refresh');
				}, 500);
			} catch (e) {
				throw Error(e);
			}
		},
		
		// 云店根据费率计算
		getShopPrice(item) {
			// 云仓产品，非会员增加10%
			if (item.type == 0) {
				// 云仓产品
				if(!item.store_id){
					let pic = item.price != '0.00' ? item.price : item.saleprice;
					return (Number(pic) + (Number(pic) * this.ratio) / 100).toFixed(2);
				}else{
					return item.price != '0.00' ? item.price : item.saleprice;
				}
			} else {
				return item.price != '0.00' ? item.price : item.saleprice;
			}
		}
	}
};
</script>

<style scoped lang="scss">
@mixin flexDef {
	display: flex;
	align-items: center;
}

$colorDef: #e43927;

.title {
	margin-top: 10rpx;
	font-size: 14px;
	font-weight: bold;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #444;
	overflow: hidden;
}
.con {
	margin: 10rpx 0px;
	@include flexDef;
}
.shop-price {
	color: $colorDef;
	font-size: 36rpx;
	@include flexDef;
	justify-content: space-between;
	.shop-price-mini {
		font-size: 24rpx;
	}
	.shop-cart {
		background-color: $colorDef;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		@include flexDef;
		justify-content: center;
	}
}
</style>
